<template>
    <div class="carousel">
        <a-carousel :dots="false">
            <img src="@/assets/images/supplierDisplayCenter/carousel.png" />
        </a-carousel>
        <!-- <div class="navBlock w1200">
            <div class="navBlockItem">
                <img src="@/assets/images/supplierDisplayCenter/navItem.png" />
                <div class="navBlockItem_right">
                    <div class="navBlockItemTitle">供应商入驻</div>
                    <div class="navBlockItemSub">汇聚供应商资源，为你畅通供需采购之道！</div>
                </div>
            </div>
            <div class="navBlockItem">
                <img src="@/assets/images/supplierDisplayCenter/navItem2.png" />
                <div class="navBlockItem_right">
                    <div class="navBlockItemTitle">寻源服务</div>
                    <div class="navBlockItemSub">汇聚供应商资源，为你畅通供需采购之道！</div>
                </div>
            </div>
            <div class="navBlockItem">
                <img src="@/assets/images/supplierDisplayCenter/navItem3.png" />
                <div class="navBlockItem_right">
                    <div class="navBlockItemTitle">信用中心</div>
                    <div class="navBlockItemSub">汇聚供应商资源，为你畅通供需采购之道！</div>
                </div>
            </div>
            <div class="navBlockItem">
                <img src="@/assets/images/supplierDisplayCenter/navItem4.png" />
                <div class="navBlockItem_right">
                    <div class="navBlockItemTitle">金融服务</div>
                    <div class="navBlockItemSub">汇聚供应商资源，为你畅通供需采购之道！</div>
                </div>
            </div>
        </div>
        <div class="navData w1200">
            <div class="navDataItem">
                <div class="navDataNum">38903</div>
                <div class="navDataTitle">平台供应商</div>
            </div>
            <div class="navDataItem">
                <div class="navDataNum">38903</div>
                <div class="navDataTitle">覆盖品类</div>
            </div>
            <div class="navDataItem">
                <div class="navDataNum">38903</div>
                <div class="navDataTitle">网络商机</div>
            </div>
            <div class="navDataItem">
                <div class="navDataNum">38903</div>
                <div class="navDataTitle">办公用品</div>
            </div>
            <div class="navDataItem">
                <div class="navDataNum">38903</div>
                <div class="navDataTitle">网络商机</div>
            </div>
            <div class="navDataItem noBoder">
                <div class="navDataNum">周</div>
                <div class="navDataTitle">检测频率</div>
            </div>
        </div>
        <div class="advBlock w1200">
            <img src="@/assets/images/supplierDisplayCenter/adv.png" />
            <img src="@/assets/images/supplierDisplayCenter/adv.png" />
            <img src="@/assets/images/supplierDisplayCenter/adv.png" />
            <img src="@/assets/images/supplierDisplayCenter/adv.png" />

        </div> -->
    </div>
</template>
    
<script>
import storage from '@/utils/storage'

export default {
    name: "Carousel",
    data() {
        return {
            current: 0,
            isLogin: storage.session.get('isLogin') && storage.session.get('authToken'),
        }
    },

    methods: {

    }
}
</script>
    
<style scoped lang="scss">
$colorPrimary: #0078FE;

.ant-carousel>>>.slick-slide {
    text-align: center;
    //   height: 500px;
    width: 100%;
}

.ant-carousel>>>.slick-slide h3 {
    color: #fff;
}
.carousel {
    position: relative;
    // padding-bottom: 370px;
}
.navBar {
    background-color: $colorPrimary;
    width: 100%;
    height: 40px;
}

.navBarUl {
    display: flex;
    line-height: 40px;

    li {
        color: #fff;
        margin-right: 80px;
        cursor: pointer;
    }
}

.navBlock {
    position: absolute;
    bottom: -55px;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: space-between;
    .navBlockItem {
        display: flex;
        position: -20px;
        width: 285px;
        height: 110px;
        border-radius: 10px;
        opacity: 1;
        /* 灰度/纯白 */
        background: #FFFFFF;
        /* 蓝色投影 */
        box-shadow: 0px 4px 20px 0px rgba(0, 120, 254, 0.1);
        padding: 27px 30px ;
        img {
            margin-right: 10px;
        }
        .navBlockItemTitle {
            font-size: 16px;
            color: #323232;
        }
        .navBlockItemSub {
            font-size: 12px;
            color: #646464;
        }
    }
}
.navData {
    display: flex;
    justify-content: space-between;    
    position: absolute;
    left: 0;
    right: 0;
    bottom: -190px;
    margin: auto;
    .navDataItem {
        text-align: center;
        border-right: 1px solid #E2E2E2;;
        display: inline-block;
        width: 200px;
        &.noBoder {
        border-right: 0

        }
    }
    .navDataNum {
        color: #0078FE;
        font-size: 35px;
    }
    .navDataTitle {
        color: #646464;
        font-size: 15px;
    }
}
.advBlock {
    display: flex;
    justify-content: space-between;
    img {
        width: 288px;
    height: 128px;
    }
}
</style>
    